<template>
  <div class="list">
    <van-tabs v-model="active" @click="GetList">
      <van-tab
        v-for="item in brotherCategory"
        :title="item.name"
        :key="item.id"
      >
        <h3>{{ currentCategory.name }}</h3>
        <p>{{ currentCategory.front_desc }}</p>
        <ul>
          <li v-for="i in goodsList" :key="i.id" @click="goDetail(i.id)">
            <img v-lazy="i.list_pic_url" alt="" />
            <p>{{ i.name }}</p>
            <span>{{ i.retail_price | Price }}</span>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { GetListData, GetListData1 } from "@/https/http.js";
export default {
  name: "VueList",

  data() {
    return {
      active: "",

      brotherCategory: [], //标题栏种类
      currentCategory: [], //当前某个种类
      goodsList: [],
    };
  },

  created() {
    // this.id=this.$route.query.id
    // console.log(this.$route.query)
    // console.log(this.id)
    // console.log(this.active)
    //请求分类页商品id
    GetListData({ id: this.$route.query.id }).then((res) => {
      console.log(555, res);
      //获取标题栏种类数据
      this.brotherCategory = res.data.data.brotherCategory;

      //当前某个种类
      this.currentCategory = res.data.data.currentCategory;
      console.log(this.brotherCategory, 111);

      //判断 如果当前某个种类的id等于传参id，把当前某个种类的索引下标赋值给active
      this.brotherCategory.forEach((item, key) => {
        if (this.$route.query.id == item.id) {
          this.active = key;
          console.log(key);
        }
      });
      GetListData1({
        categoryId: this.currentCategory.id,
        page: 1,
        size: 50,
      }).then((res) => {
        this.goodsList = res.data.data.goodsList;
        //  console.log(999,res)
      });
    });
  },

  methods: {
    GetList(m) {
      console.log(this.brotherCategory[m].id);
      GetListData({ id: this.brotherCategory[m].id }).then((res) => {
        // console.log(555,res)
        //获取标题栏种类数据

        let { brotherCategory, currentCategory } = res.data.data;

        this.brotherCategory = brotherCategory;
        //当前某个种类
        this.currentCategory = currentCategory;
        //判断 如果当前某个种类的id等于传参id，把当前某个种类的索引下标赋值给active

        GetListData1({
          categoryId: this.currentCategory.id,
          page: 1,
          size: 50,
        }).then((res) => {
          this.goodsList = res.data.data.goodsList;

          console.log(999, res);
        });
      });
    },
    goDetail(id) {
      this.$router.push({ path: "/detail", query: { id } });
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  text-align: center;
  h3 {
    margin: 20px 0;
  }
  p {
    margin: 10px auto 40px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      // display: flex;
      img {
        width: 100%;
        display: block;
      }
      p {
        font-size: 16px;
      }
      span {
        color: rgb(128, 16, 16);
      }
    }
  }
}
</style>
